<template>
  <div class="contract">
    <van-tabs v-model="tabsActive" background="#1effea33" title-active-color="#6e94ab" title-inactive-color="#5d6f6e" @click="tabClick">
      <van-tab v-for="(tab) in kData" :key="tab.bid" :title="tab.bname" sticky :name="tab.bid">
      </van-tab>
    </van-tabs>
    <time-progress :canvasData="canvasData"/>
  </div>
</template>
<script>
import timeProgress from "./components/time-progress";
import { getKaiZiProjects } from "@/request/api.js";
export default {
  name: "contract",
  components: {
    timeProgress,
  },
  props: ['kData'],
  data() {
    return {
      tabsActive: 0,
      canvasData: [],
    };
  },
  methods:{
    tabClick(name) {
      getKaiZiProjects({bid: name}).then(res=>{
        this.canvasData = res;
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.contract {
  .tab-title {
      padding: 0 10px;
      text-align: left;
      margin: 10px 0;
  }
}
</style>